<template>
	<view class="page">
		<view class="title">
			3.5.原生事件监听及组件内置事件处理
		</view>
		<view class="p">
			官网链接API
			<uni-link href="https://cn.vuejs.org/guide/essentials/event-handling.html" text="事件处理"
				color="#007BFF"></uni-link>
			<uni-link href="https://uniapp.dcloud.net.cn/tutorial/vue3-basics.html#%E4%BA%8B%E4%BB%B6%E5%A4%84%E7%90%86"
				text="Uniapp官网关于事件处理的教程" color="#007BFF"></uni-link>
		</view>
		<view class="p">
			<view class="box" :style="{background:color,color:'#fff'}" @click="changeColor">
				注意看代码 这是vue3自带的监听事件
			</view>
		</view>
		<view class="p">
			<view class="box">
				<view class="p">
					<switch checked @change="clickchange"></switch>
				</view>
				<view class="p">
					<button :loading="isLoading" type="primary" size="mini">
						上面的按钮控制按钮的loading状态
					</button>
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	//定义颜色
	const color = ref("#fadb14");

	//定义点击改变背景色方法
	const changeColor = () => {
		color.value = "#" + String(Math.random()).substring(3, 9);
		console.log(color.value);
	}

	//定义切换按钮的方法
	const isLoading = ref(true)
	const clickchange = (e) => {
		console.log(e.detail.value);
		isLoading.value = e.detail.value
	}
</script>

<style lang="scss" scoped>

</style>